<template lang="html">
    <div class="container" v-loading="loading">
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                  <el-input class="form_input" v-model="searchText" placeholder="请输入商品名称/编码/订单编号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :disabled="loading" size="small" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="tables">
          <el-table :data="tableData" border :header-cell-style="{background:'#f5f5f5',color:'#666'}" style="width: 100%">
                <el-table-column label="评价内容" align="center">
                  <template slot-scope="scope">
                    <div class="t_content">
                      <p>{{scope.row.appraise}}</p>
                      <el-image class="img" v-for='(img,index) in scope.row.evaImg' :key="index" :src="img.img_url" :preview-src-list="[img.img_url]" />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="appraiseTime" :formatter="formatTime" label="评价日期" align="center"></el-table-column>
                <el-table-column prop="orderSublistId" label="订单编号" align="center"></el-table-column>
                <el-table-column prop="commodityName" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="afterSalaContent" label="售后详情" align="center"></el-table-column>
                <el-table-column prop="designerName" label="设计师" align="center"></el-table-column>
                <el-table-column prop="userName" label="服务客户" align="center"></el-table-column>
          </el-table>
          <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currentPage="currentPage" :totalPage="totalPage" />
        </div>



    </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      searchText: '',
      currentPage: 1,
      totalPage: 0,
      pageSize: 10,
      tableData: [],
    }
  },
  created(){
    this.selectEvaluateAfterSalaPage();
  },
  methods:{
    selectEvaluateAfterSalaPage(){
      this.loading = true;
      this.$http.selectEvaluateAfterSalaPage({
        query: this.searchText,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }).then(res=>{
        this.loading = false;
        this.tableData = res.data.rows;
        this.pageSize = res.data.pageSize;
        this.totalPage = res.data.total;
      });
    },
    onSubmit(){
      this.handleCurrentChange(1);
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(e){
      this.currentPage = e;
      this.selectEvaluateAfterSalaPage();
    },
    formatTime(row){
      let time = new Date(row.appraiseTime);
      if(time == 'Invalid Date'){
        return '';
      }
      return time.getFullYear()+'-'+(time.getMonth()+1)+'-'+time.getDate()+' '+time.getHours()+':'+time.getSeconds();
    }

  }

}
</script>
<style lang="css" scoped>
.t_content p{
  line-height: 25px;
}
.t_content .img{
  width: 50px;
  height: 50px;
}
</style>
